<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-08-14 12:23:38
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-11-06 09:39:31
 * @FilePath: \BLOG\src\components\common\LImg.vue
-->

<!--
  * @Description: 图片展示组件
  *props:
  * src: 图片地址
  * fit: 图片缩放类型 默认 fill
  * size: 图片大小 默认 60px
  * isUnPreview: 是否不显示预览 默认 false
  * loadingText: 加载文字 默认 加载中...
  * isText: 是否显示文字 默认 true
  * isSpin: 是否为转圈加载 默认 false
  * alt: 图片alt属性 默认 ''
 -->
<template>
  <el-image
    class="pointer el-img-wrap"
    :class="{ 'border-img': border }"
    :width="width"
    :height="height"
    preview-teleported
    hide-on-click-modal
    infinite
    :src="src"
    :fit="fit"
    :previewSrcList="isUnPreview ? [] : preview.length > 0 ? preview : [src]"
    :initial-index="index"
    :lazy="true">
    <template #placeholder>
      <div class="img-loading-wrap pointer glogal-img-wrap" style="width: 100%; height: 100%; background-color: #ffffff">
        <img v-if="isSpin" :style="{ width, height }" class="img-loading" src="@/assets/images/common/loading.svg" alt="loading" />
        <img v-else fit="cover" :style="{ height, transform: 'scale(' + scale + ')' }" class="img-loading" :src="getOnlineImgUrl('loading', '/imgs/common', 'jpg')" alt="loading" />
        <span v-if="isText" class="img-loading-text tip-text">{{ loadingText }}</span>
      </div>
    </template>

    <template #error>
      <div class="img-error-wrap glogal-img-wrap">
        <img :style="{ width: size, height: size }" class="img-error" src="@/assets/images/common/error.png" alt="error" />
        <span v-if="isText" class="img-error-text tip-text">😭 加载失败了</span>
      </div>
    </template>
  </el-image>
</template>

<script lang="ts" setup>
import { getOnlineImgUrl } from '@/utils/common';
import { ElImage } from 'element-plus';

interface Props {
  // 图片地址
  src?: string;
  // 图片缩放类型 默认 fill
  fit?: string;
  // 图片大小 默认 60px
  size?: string;
  width?: string;
  height?: string;
  // 是否不显示预览 默认 false
  isUnPreview?: boolean;
  preview?: string[];
  index?: number;
  // 加载文字 默认 加载中...
  loadingText?: string;
  // 是否显示文字 默认 true
  isText?: boolean;
  // 是否为转圈加载 默认 false
  isSpin?: boolean;
  alt?: string;
  border?: boolean;
  scale?: number;
}

const props = withDefaults(defineProps<Props>(), {
  fit: 'fill',
  size: '60px',
  width: '100%',
  height: '100%',
  isUnPreview: false,
  preview: () => [],
  index: 0,
  loadingText: '加载中...',
  isText: true,
  isSpin: false,
  alt: '',
  border: false,
  scale: 1.4
});
</script>

<style lang="scss">
.el-img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-image__inner,
  .el-image__preview {
    cursor: url('@/assets/images/cursor/pointer.png'), auto !important;
  }
}
.glogal-img-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  .tip-text {
    margin-top: 4px;
    font-size: 10px;
    color: #999;
  }
}
.border-img {
  border: 1px solid #fff;
}

.dark {
  .border-img {
    border: 1px solid var(--border-color);
  }
}
</style>
